<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<HeadNav titleName="交易钱包" :topheight="navBarHeight"></HeadNav>
		<view class="main">
			<view class="balance">
				<view class="bal-card">
					<view class="bal-tit">
						账户余额
						<image src="../../static/img/me-63.png"></image>
					</view>
					<!-- <view class="bal-subtit">
						账单记录
						<image src="../../static/img/me-64.png"> </image>
					</view> -->
					<view class="bal-two">
						<view class="balo-lt" @click="jumpExTem(1)">
							<view>CC</view>
							<view>{{ walletInfo.ktcBalance }}</view>
							<view>{{ walletInfo.newcomerBalance }}*</view>
						</view>
						<view class="balo-lt" @click="jumpExTem(15)">
							<view>USDA</view>
							<view>{{ walletInfo.usdtBalance }}</view>
						</view>
					</view>
					<view class="bal-tra">
						<view @click="dem()">
							<image src="../../static/img/me-65.png"></image>兑换
						</view>
						<view @click="extractive()">
							<image src="../../static/img/me-66.png"></image>划转
						</view>
					</view>
				</view>

				<view class="bal-navs">
					<view class="bal-nav" @click="friend()">
						<image src="../../static/img/me-67.png"></image>
						<text>内网转账</text>
					</view>

					<view class="bal-nav" @click="jumpFarm">
						<image src="../../static/img/me-68.png"></image>
						<text>C2C</text>
					</view>

					<view class="bal-nav" @click="show()">
						<image src="../../static/img/me-69.png"></image>
						<text>节点分配</text>
					</view>

					<!-- <view class="bal-nav" @click="dem()">
						<image src="../../static/img/me-78.png"></image>
						<text>兑换玉石</text>
					</view> -->

					<view class="bal-nav" @click="sharePost()">
						<image src="../../static/img/me-70.png"></image>
						<text>邀请好友</text>
					</view>
				</view>
			</view>

			<view class="accnt-pd">
				<view class="accnt-tit">账户总览</view>
				<view class="accnt-box">
					<view class="ac-tit">
						<view class="ac-lt">资产</view>
					</view>
					<view class="ac-fc">
						<view class="fc-im fc-rh" @click="jumpExTem(1)">
							<view>{{ walletInfo.ktcBalance }}</view>
							<view>CC总资产</view>
						</view>

						<view class="fc-im" @click="jumpExTem(2)">
							<view>{{ walletInfo.abtBalance }}</view>
							<view>ABT</view>
						</view>

						<!-- <view class="fc-im">
							<view>{{ walletInfo.dedicate }}</view>
							<view>流通值</view>
						</view> -->
					</view>
					<view class="ac-fc">
						<view class="fc-im fc-rh" @click="jumpExTem(20)">
							<view>{{ walletInfo.equityPoints }}</view>
							<view>积分</view>
						</view>

						<view class="fc-im">
							<view>{{ walletInfo.dedicate }}</view>
							<view>流通值</view>
						</view>
					</view>
				</view>

				<view class="accnt-box" v-if="false">
					<view class="ac-tit g-lb">
						<view class="ac-lt">市场数据</view>
						<!-- <view class="more">交易记录 <image src="../../static/img/me-71.png"></image></view> -->
					</view>

					<view class="ac-fc">
						<view class="fc-im fc-rh">
							<view>{{cInfo.yesterdayTotal}}</view>
							<view>昨日成交</view>
						</view>

						<view class="fc-im">
							<view>{{cInfo.countOrder}}</view>
							<view>当前求购</view>
						</view>
					</view>
				</view>

				<view class="accnt-box" v-if="false">
					<view class="ac-tit g-lu">
						<view class="ac-lt">成交区间价</view>
					</view>

					<view class="ac-fc">
						<view class="fc-im text_c">
							0.11-2.11USDT
							<!-- <view>锁仓CC总发放数量</view> -->
						</view>

						<!-- <view class="fc-im">
							<view>0/0CC</view>
							<view>锁仓CC总发放数量</view>
						</view> -->
					</view>
				</view>

				<view class="accnt-box">
					<!-- <view class="ac-tit">
						<view class="ac-lt">兑换CC概览</view>
					</view>
					<view class="ac-fc pb-c">
						<view class="fc-im fc-rh">
							<view>0</view>
							<view>累计兑换数量</view>
						</view>
						
						<view class="fc-im fc-rh">
							<view>0</view>
							<view>已发放数量</view>
						</view>
						
						<view class="fc-im">
							<view>0</view>
							<view>邀请发放数量</view>
						</view>
					</view> -->

					<view class="start-box">
						<view class="start-img">
							<image src="../../static/img/me-72.png"></image>
							<image src="../../static/img/me-73.png"></image>
						</view>
						<view class="start-txt">我的激励等级</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" background-color="transparent" border-radius="8px 8px 0 0" type="bottom">
			<view class="network-box">
				<view class="network-title">选择代币 <image src="../../static/img/me-21.png" @click="closePopup()"></image>
				</view>
				<view class="box_item" @click="select(item,i)" v-for="(item,i) in usdtList">
					<image :src="item.img"></image>
					<view>{{item.text}}</view>
					<uni-icons v-if="index==i" type="checkmarkempty" color="#3F93FF" size="24"></uni-icons>
				</view>
				<!-- <view class="box_item" @click="select(1)">
					<image src="@/static/img/token_3.png"></image>
					<view>USDTBEP20</view>
					<uni-icons v-if="index==1" type="checkmarkempty" color="#3F93FF" size="24"></uni-icons>
				</view> -->
			</view>
		</uni-popup>

		<uni-popup ref="moneyPop" :mask-click="false">
			<!-- <image src="../../static/img/close-01.png" class="close"></image> -->
			<view class="money-box">
				<image src="../../static/img/close-01.png" class="close" @click="closeMoneyPop"></image>
				<view class="money-tit">绑定手机号才可进行交易</view>

				<view class="money-footer">
					<view @click="jumpRec()">立即绑定</view>
				</view>
				<!-- <image src="../../static/img/money_box.png"></image> -->
				<!-- <image src="../../static/img/money_box.png" class="money-tp"></image> -->
			</view>
		</uni-popup>
		<uni-popup ref="popup2" type="center">
			<view class="popup-box">
				<view class="popup-title">划转</view>
				<!-- <view class="popup-sub">确认要删除本条草稿动态</view> -->
				<view class="popup-text">USDA余额：{{walletInfo.usdtBalance}} </view>
				<input type="number" placeholder="请输入划转金额" v-model="h_num" />
				<view class="popup-footer">
					<view class="cancle" @click="closePopup()">取消</view>
					<view class="confim" @click="confim()">确定</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup3" type="center">
			<view class="popup-box box2">
				<view class="popup-title">兑换种子</view>
				<!-- <view class="popup-sub">确认要删除本条草稿动态</view> -->
				<input type="number" placeholder="请输入兑换种子数量" v-model="y_num" />
				<input type="text" password="true" placeholder="请输入钱包密码" v-model="y_password" />
				<view class="popup-footer">
					<view class="cancle" @click="closePopup()">取消</view>
					<view class="confim" @click="cDui()">确定</view>
				</view>
			</view>
		</uni-popup>
		
		
		<uni-popup ref="popup4">
			<view class="popup-post">
		
				<view class="post-main">
					<l-painter
						css="width: 560rpx; height: 720rpx; padding: 14rpx; background: linear-gradient( 180deg, #E8F4FD 0%, #FFFFFF 50%); border-radius: 10rpx;"
						ref="painter">
						<l-painter-view css="width: 100%; height: 100%; border: 2rpx solid #ccc">
							<l-painter-view css="text-align:center; margin-top: 20rpx;">
								<l-painter-text text="链爱比特"
									css="font-size: 56rpx; color: #333; text-align:right;"></l-painter-text>
							</l-painter-view>
							<l-painter-view css="text-align:center; margin-top: 10rpx;">
								<l-painter-text text="元宇宙社交新体验"
									css="font-size: 28rpx; color: #333; text-align:right;"></l-painter-text>
							</l-painter-view>
							<!-- https://ktalk-chat.oss-cn-beijing.aliyuncs.com/default_avatar/default_avatar.png -->
							<l-painter-view css="width: 460rpx; margin: 0 auto; margin-top: 60rpx;">
								<l-painter-image src="../../static/img/share.png"
									css="width: 460rpx; height: 280rpx;"></l-painter-image>
							</l-painter-view>
		
							<!-- justify-content: space-between -->
							<l-painter-view
								css="width: 460rpx; height: 100rpx; margin: 0 auto; margin-top: 60rpx; display: flex; align-items: center; ">
								<!-- <l-painter-view class="display: flex;"> -->
									<l-painter-view>
										<l-painter-image src="../../static/img/logn.png"
											css="width: 100rpx; height: 100rpx;"></l-painter-image>
									</l-painter-view>
		
		
									<l-painter-view>
										<l-painter-view>
											<l-painter-text :text="userInfo.id"
												css="font-size: 24rpx; color: #333;"></l-painter-text>
										</l-painter-view>
										<l-painter-view>
											<l-painter-text text="邀请你加入链爱比特"
												css="font-size: 24rpx; color: #333;"></l-painter-text>
										</l-painter-view>
										<l-painter-view>
											<l-painter-text :text="'邀请码：'+userInfo.inviteCode"
												css="font-size: 24rpx; color: #333;"></l-painter-text>
										</l-painter-view>
		
										<!-- <l-painter-text text="邀请你加入链爱比特!" css="font-size: 24rpx; color: #333;"></l-painter-text> -->
									</l-painter-view>
		
								<!-- </l-painter-view> -->
		
								<l-painter-view css="margin-left: 60rpx">
									<l-painter-qrcode :text="androidUrl" css="width: 100rpx; height: 100rpx;"
										v-if="androidUrl" />
								</l-painter-view>
		
		
		
							</l-painter-view>
		
						</l-painter-view>
					</l-painter>
					<!-- </view> -->
		
				</view>
		
				<view class="tarbar-btn">
					<view class="bar-up">
						<view class="bar-item" @click="saveImg">
							<image src="../../static/img/share-01.png"></image>
							<view>保存图片</view>
						</view>
						<view class="bar-item mar-lt" @click="copyAddUrl">
							<image src="../../static/img/share-02.png"></image>
							<view>复制链接</view>
						</view>
						<view class="bar-item mar-lt" @click="copyCode(userInfo.inviteCode)">
							<image src="../../static/img/share-02.png"></image>
							<view>复制邀请码</view>
						</view>
					</view>
					<view class="bar-down" @click="canclePost">取消</view>
				</view>
		
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { throttle } from "@/utils/common.js"
	import { getWalletInfoApi, fundTransfer, getTradeOrderConfigInfo, pointExchange, getNewAppInfoAPI } from "@/api/api.js"
	import HeadNav from "@/components/HeadNav"
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				index: 0,
				walletInfo: '',
				userInfo: '',
				usdtList: [{
						text: 'TRCUSDT',
						img: '../../static/img/token_1.png',
						address: '',
					},
					{
						text: 'USDTBEP20',
						img: '../../static/img/token_3.png',
						address: '',
					}
				],
				h_num: '',
				cInfo: '',
				y_num: '',
				y_password: '',
				androidUrl: '',
			}
		},
		components: {
			HeadNav
		},
		mixins: [navBarMixin],
		methods: {
			async sharePost() {
				const res = await getNewAppInfoAPI()
				if (!res.code) {
					this.androidUrl = res.data.androidUrl
					uni.hideTabBar()
					this.$refs.popup4.open()
				}
			},

			saveImg() {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					pathType: 'url',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath);
						let that = this
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								// console.log('save success');
								uni.showToast({
									title: '保存成功',
									icon: 'none'
								})
								setTimeout(() => {
									that.$refs.popup4.close()
								}, 1000)
							}
						});

					}
				})
			},

			copyAddUrl() {
				let that = this
				uni.setClipboardData({
					data: this.androidUrl,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
						setTimeout(() => {
							that.$refs.popup4.close()
						}, 1000)

					}
				})
			},
			copyCode(e) {
				let that = this
				uni.setClipboardData({
					data: e,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.showTabBar()
							that.$refs.popup2.close()
						}, 1000)
					}
				})
			},

			canclePost() {
				this.$refs.popup4.close()
			},
			cDui() {
				throttle(() => {
					pointExchange({
						num: this.y_num,
						password: this.y_password
					}).then(res => {
						this.closePopup()
						console.log(res);
						if (res.code == 0) {
							uni.showToast({
								title: '兑换成功!',
								icon: 'none',
								duration: 2000,
							})
							this.getWallinfo()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 3000,
							})
						}
						this.y_num = ''
						this.y_password = ''
					})

				},5000)
			},
			dem() {
				this.$refs.popup3.open()
			},
			c2c() {
				getTradeOrderConfigInfo().then(res => {
					console.log(res);
					this.cInfo = res.data
				})
			},
			confim() {
				fundTransfer({
					amount: this.h_num,
					type: 2
				}).then(res => {
					console.log();
					if (res.code == 0) {
						uni.showToast({
							title: '划转成功!',
							icon: 'none',
							duration: 2000,
						})
						this.getWallinfo()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000,
						})
					}
					this.closePopup()
					this.h_num = ''
				})
			},
			show() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
			},

			jumpExTem(e) {
				uni.navigateTo({
					url: '/pages/me/extractveTem?type=' + e
				})
			},
			friend() {
				uni.navigateTo({
					url: '/pages/me/selectFriend'
				})
			},
			jumpFarm() {
				// uni.navigateTo({
				// 	url: '/pages/me/farmMoney'
				// })
				uni.navigateTo({
					url: '/pages/me/brok'
				})
			},
			select(e, i) {
				this.index = i
				uni.navigateTo({
					url: '/pages/me/recharge?info=' + JSON.stringify(e)
				})
			},
			extractive() {
				this.$refs.popup2.open()
				// uni.showToast({
				// 	title:'暂未开放',
				// 	icon:'none'
				// })
				// uni.navigateTo({
				// 	url: '/pages/me/extractive?yue='+this.walletInfo.usdtBalance
				// })
			},
			recharge() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
				return

				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
				this.$refs.popup2.close()
				this.$refs.popup3.close()
			},
			async getWallinfo() {
				const res = await getWalletInfoApi()
				if (!res.code) {
					this.walletInfo = res.data
					// if(!this.walletInfo.isBindOtc) {
					// 	this.$refs.moneyPop.open()
					// }

				}
			},
			closeMoneyPop() {
				this.$refs.moneyPop.close()
			},
			jumpRec() {
				uni.redirectTo({
					url: '/pages/me/bindOtc'
				})
			}
		},
		onLoad(e) {

			console.log(e);
			this.userInfo = JSON.parse(e.info)
			console.log('this.userInfo', this.userInfo)
			if (!this.userInfo.isBindOtc) {
				this.$nextTick(() => {
					this.$refs.moneyPop.open()
				})
			}

			this.usdtList[0].address = this.userInfo.trcAddress
			this.usdtList[1].address = this.userInfo.bepAddress
			// this.getWallinfo()
		},
		onShow() {
			this.getWallinfo()
			this.c2c()
		}
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;
		padding-bottom: 62rpx;

		.main {
			margin-top: 30rpx;

			.balance {
				display: flex;
				flex-direction: column;
				padding: 30rpx;
				padding-bottom: 40rpx;
				background: #fff;

				.bal-card {
					height: 344rpx;
					padding: 30rpx;
					box-sizing: border-box;
					position: relative;
					background: url('../../static/img/me-62.png') no-repeat;
					background-size: 100% 100%;

					.bal-tit {
						display: flex;
						font-size: 28rpx;
						color: #fff;

						image {
							margin-left: 14rpx;
							width: 44rpx;
							height: 44rpx;
						}
					}

					.bal-subtit {
						position: absolute;
						right: 0;
						top: 20rpx;
						display: flex;
						align-items: center;
						padding: 6rpx 20rpx;
						font-size: 24rpx;
						color: #fff;
						border-radius: 20rpx 0 0 20rpx;
						background: linear-gradient(270deg, #458DF9 0%, rgba(157, 196, 255, 0.9) 100%);

						image {
							margin-left: 16rpx;
							width: 10rpx;
							height: 20rpx;
						}
					}

					.bal-two {
						display: flex;
						margin-top: 10rpx;
						padding-bottom: 30rpx;
						border-bottom: 1rpx solid rgba(221, 221, 221, 0.5);

						.balo-lt {
							flex: 1;

							view {
								color: #fff;
								text-align: center;

								&:nth-of-type(1) {
									font-size: 28rpx;
									margin-bottom: 14rpx;
								}

								&:nth-of-type(2) {
									font-size: 32rpx;
								}
							}

							&:first-child {
								position: relative;

								&::after {
									content: '';
									position: absolute;
									right: 0;
									width: 2rpx;
									top: 50%;
									transform: translateY(-50%);
									height: 36rpx;
									background: $theme-color-a;
								}
							}
						}
					}

					.bal-tra {
						display: flex;
						flex: 1;
						justify-content: space-around;

						view {
							font-size: 28rpx;
							padding-top: 30rpx;
							display: flex;
							align-items: center;
							color: #fff;

							image {
								margin-right: 20rpx;
								width: 48rpx;
								height: 48rpx;
							}
						}

						// height: ;
					}
				}

				.bal-navs {
					display: flex;
					margin-top: 40rpx;
					justify-content: space-between;
					font-size: 26rpx;
					padding: 0 10rpx;

					.bal-nav {
						image {
							margin: 0 auto 10rpx;
							width: 60rpx;
							height: 60rpx;
							display: block;
						}
					}
				}
			}

			.accnt-pd {
				padding: 0 30rpx;

				.accnt-tit {
					font-size: 32rpx;
					margin-top: 40rpx;
				}

				.accnt-box {
					padding: 30rpx;
					margin-top: 30rpx;
					padding-bottom: 40rpx;
					background: #fff;
					border-radius: 10rpx;

					// font-weight: bold;
					.ac-tit {
						position: relative;
						padding-left: 20rpx;
						display: flex;
						justify-content: space-between;

						&::after {
							content: '';
							position: absolute;
							width: 4rpx;
							height: 24rpx;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							background: #F0AE59;
						}

						&.g-lb::after {
							background: #8C89FF;
						}

						&.g-lu::after {
							background: #3F93FF;
						}

						.ac-lt {
							font-size: 28rpx;
						}

						.more {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: $theme-color-a;

							image {
								margin-left: 10rpx;
								width: 10rpx;
								height: 20rpx;
							}
						}


					}

					.ac-fc {
						display: flex;
						align-items: center;
						margin-top: 30rpx;

						.fc-im {
							flex: 1;

							view:first-child {
								font-size: 32rpx;
								text-align: center;
							}

							view:last-child {
								font-size: 26rpx;
								text-align: center;
								color: #666666;
								margin-top: 10rpx;
							}

							&.fc-rh {
								position: relative;

								&::after {
									content: '';
									width: 2rpx;
									height: 40rpx;
									position: absolute;
									right: 0;
									top: 50%;
									transform: translateY(-50%);
									background: #DDDDDD;
								}
							}
						}

						.text_c {
							font-size: 28rpx;
							text-align: center;
						}

						&.pb-c {
							padding-bottom: 30rpx;
							border-bottom: 2rpx solid #eee;
						}
					}

					.start-box {
						.start-img {
							display: flex;
							margin-top: 30rpx;
							padding-left: 10rpx;

							image {
								width: 30rpx;
								height: 30rpx;
							}
						}

						.start-txt {
							padding-left: 12rpx;
							color: #666;
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.network-box {
			height: 440rpx;
			min-height: 220rpx;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0 0;
			overflow: hidden;

			.network-title {
				position: relative;
				height: 160rpx;
				line-height: 160rpx;
				text-align: center;
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
				background: linear-gradient(180deg, #EBF3FF 0%, #FFFFFF 100%);

				image {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					right: 30rpx;
					top: 60rpx;
				}
			}

			.box_item {
				display: flex;
				align-items: center;
				margin: 0 30rpx 60rpx;

				image {
					width: 58rpx;
					height: 58rpx;
				}

				view {
					flex: 1;
					font-size: 30rpx;
					margin-left: 20rpx;
				}
			}
		}

		.money-box {
			width: 560rpx;
			height: 650rpx;
			// margin-top: 402rpx;
			padding-top: 402rpx;
			position: relative;
			box-sizing: border-box;
			background: url('../../static/img/money_box.png') no-repeat;
			background-size: 100% 100%;
			// overflow: hidden;

			// border: 2rpx solid red;
			.close {
				position: absolute;
				z-index: 3;
				top: 0;
				left: 100%;
				transform: translateX(-20%);
				width: 48rpx;
				height: 48rpx;
			}

			.money-tit {

				text-align: center;
				color: #333;
				font-size: 32rpx;
			}

			.money-footer {
				padding: 0 75rpx;
				height: 76rpx;
				margin-top: 60rpx;
				line-height: 76rpx;

				view {
					text-align: center;
					background: #3F93FF;
					border-radius: 40rpx;
					font-size: 28rpx;
					color: #fff;
				}
			}

			.money-tp {
				width: 100%;
				height: 100%;
			}

			.money-btn {
				width: 100%;
				height: 100%;
			}

			.open-door {
				position: absolute;
				z-index: 9;
				left: 50%;
				bottom: 186rpx;
				transform: translate(-50%);
				width: 260rpx;
				height: 70rpx;
			}
		}

		.box2 {
			height: 680rpx !important;
		}

		.popup-box {
			width: 583rpx;
			height: 630rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;
			background: url('../../static/img/me-32.png') no-repeat;
			background-size: cover;
			overflow: hidden;

			.popup-title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				text-align: center;
				margin-top: 180rpx;
			}

			.popup-text {
				margin: 40rpx 40rpx 0;
				font-size: 28rpx;
			}

			.popup-sub {
				margin-top: 46rpx;
				color: #666;
				font-size: 28rpx;
				text-align: center;
			}

			.popup-footer {
				display: flex;
				justify-content: space-between;
				margin: 72rpx 52rpx 0;

				.cancle {
					width: 200rpx;
					line-height: 76rpx;
					text-align: center;
					border: 2rpx solid #3F93FF;
					border-radius: 40rpx;
					color: #3F93FF;
				}

				.confim {
					width: 200rpx;
					line-height: 76rpx;
					text-align: center;
					border-radius: 40rpx;
					background: #3F93FF;
					color: #fff;
				}
			}

			input {
				// width: 500rpx;
				margin: 40rpx 40rpx 0;
				padding: 0 30rpx;
				height: 80rpx;
				font-size: 26rpx;
				line-height: 80rpx;
				background: #F4F4F4;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
			}
		}
	}
	.popup-post {
		height: 100vh;
		width: 100vw;
		position: relative;
		box-sizing: border-box;
	
		.post-main {
			width: 560rpx;
			position: absolute;
			left: 50%;
			bottom: 500rpx;
			transform: translateX(-50%);
			height: 720rpx;
			box-sizing: border-box;
			// background: linear-gradient( 180deg, #E8F4FD 0%, #FFFFFF 100%);
			background: #fff;
			border-radius: 10rpx;
			// .post-ctr {
			// 	height: 100%;
			// 	padding: 10rpx;
			// 	box-sizing: border-box;
			// }
		}
	
		.tarbar-btn {
			position: absolute;
			bottom: 0;
			width: 100%;
			background: #fff;
			border-radius: 24px 24px 0px 0px;
	
			.bar-up {
				padding: 40rpx;
				height: 216rpx;
				border-bottom: 10rpx solid #eee;
				box-sizing: border-box;
	
				.bar-item {
					// width: 100rpx;
					display: inline-block;
	
					image {
						display: block;
						width: 80rpx;
						height: 80rpx;
						margin: 0 auto;
					}
	
					view {
						margin-top: 20rpx;
						font-size: 24rpx;
					}
	
					&.mar-lt {
						margin-left: 60rpx;
					}
				}
			}
	
			.bar-down {
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
			}
		}
	}
</style>